<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MintUI学习</title>
    <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
    <!-- 先引入 Vue -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
    <style>
        .mint-radiolist{
        display: flex;
    }
    .mint-cell{
        width:33%;
    }
    .mint-header{
        background-color: #666666;
    }
    .mint-button-icon{
        margin-left:100px;
    }
    </style>
</head>

<body>
    <div id="app">
        <!-- buton -->
            <button class="mint-button-default">div里引入</button>
            <span class="mint-cell-text">头像</span>
            <br>
            <!-- 消息提示框 -->
            <mt-button type="default" @click.native="handleClick">按钮</mt-button>
            <mt-button type="danger" @click.native="loading">加载按钮</mt-button>
            <button class="mt-button">测试</button>
            <br>
            <!-- 上传图片 -->
            <mt-button @click.native="updata">上传头像</mt-button>
            <mt-actionsheet :actions="actions" v-model="sheetVisible">
            </mt-actionsheet>
            <br>
            <!-- 地区选择 -->
            <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
            <br>
            <!-- radio -->
            <mt-radio v-model="value" :options="['选项A', '选项B', '选项C']">
            </mt-radio>
            选择为：{{value}}
            <br>
            <!-- 头部Header -->
            <header class="mint-header">
                <div class="mint-header-button is-left"><a href="#/" class="router-link-active"><button class="mint-button mint-button--default mint-button--normal"><span
                                class="mint-button-icon"><i class="mintui mintui-back"></i></span> <label class="mint-button-text"></label></button></a></div>
            </header>
        </div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            value: '',
            sheetVisible: false,
            actions: [{
                    name: '本地相册',
                    method: this.handleClic
                },
                {
                    name: '相机拍摄',
                    method: this.loading
                }
            ],
            slots: [{
                flex: 1,
                values: ['四川', '云南', '贵州', '北京', '上海', '湖南'],
                className: 'slot1',
                textAlign: 'right'
            }, {
                divider: true,
                content: '-',
                className: 'slot2'
            }, {
                flex: 1,
                values: ['成都', '自贡', '达州', '2015-04', '2015-05', '2015-06'],
                className: 'slot3',
                textAlign: 'left'
            }]
        },
        methods: {
            onValuesChange(picker, values) {
                if (values[0] > values[1]) {
                    picker.setSlotValue(1, values[0]);
                }
            },
            handleClick() {
                this.$toast('提示')
            },
            loading() {
                this.$indicator.open({
                    text: '加载中...',
                    spinnerType: 'fading-circle'
                });
                setTimeout(() => {
                    this.$indicator.close();
                    console.log("1");
                }, 1000);
            },
            updata() {
                this.sheetVisible = !this.sheetVisible;
            }
        },

    })
</script>

</html>